import React from 'react'
import PropTypes from 'prop-types'
import { Table, Avatar } from 'antd'
import config from 'config'
import AnimTableBody from 'components/DataTable/AnimTableBody'
import '../../../utils/index'

const timestampToTime = (timestamp) => {
  let dateObj = new Date(timestamp)
  return dateObj.format('yyyy-qq-dd HH:mm:ss')
}

const List = ({ location, isMotion, ...tableProps }) => {

  const getAvatarText = (record) => {
    const { friendNickname, customerWxId } = record
    if (friendNickname) {
      return friendNickname.substr(friendNickname.length - 1, friendNickname.length)
    } else {
      return customerWxId ? customerWxId.substr(0, 1).toUpperCase() : 'D'
    }
  }

  const { dataSource } = tableProps
  let sum = dataSource.reduce((ret, item) => {
    ret.totalAmount = ret.totalAmount ? ret.totalAmount + item.totalAmount : 0
    ret.totalNum = ret.totalNum ? ret.totalNum + item.totalNum : 0
    ret.signAmount = ret.signAmount ? ret.signAmount + item.signAmount : 0
    ret.signTotalNum = ret.signTotalNum ? ret.signTotalNum + item.signTotalNum : 0
    ret.wayAmount = ret.wayAmount ? ret.wayAmount + item.wayAmount : 0
    ret.wayTotalNum = ret.wayTotalNum ? ret.wayTotalNum + item.wayTotalNum : 0
    ret.sendAmount = ret.sendAmount ? ret.sendAmount + item.sendAmount : 0
    ret.sendTotalNum = ret.sendTotalNum ? ret.sendTotalNum + item.sendTotalNum : 0
    return ret
  }, {})

  const handleSum = (value, record) => {
    console.log(value, record)
    return "下单金额"
  }

  const columns = [
    {
      title: '头像',
      dataIndex: 'wx.icon',
      key: 'wx.icon',
      width: 130,
      render: (avatar, record, index) => avatar ? <Avatar src={avatar} size="large" /> :
        <Avatar style={{ backgroundColor: config.randomColor(index), verticalAlign: 'middle' }}
          size="large">{getAvatarText(record)}</Avatar>,
    },
    {
      title: '运营微号',
      dataIndex: 'wx.wxId',
      key: 'wx.wxId',
    },
    {
      title: '归属员工',
      dataIndex: 'wx.belongEmpName',
      key: 'wx.belongEmpName',
    },
    {
      title: '归属部门',
      dataIndex: 'wx.deptName',
      key: 'wx.deptName'
    },
    {
      title: () => `下单金额合计(${sum.totalAmount || 0})`,
      dataIndex: 'totalAmount',
      key: 'totalAmount'
    },
    {
      title: () => `下单个数(${sum.totalNum || 0})`,
      dataIndex: 'totalNum',
      key: 'totalNum'
    },
    {
      title: () => `签收金额(${sum.signAmount || 0})`,
      dataIndex: 'signAmount',
      key: 'signAmount'
    },
    {
      title: () => `签收个数(${sum.signTotalNum || 0})`,
      dataIndex: 'signTotalNum',
      key: 'signTotalNum'
    },
    {
      title: () => `在途金额(${sum.wayAmount || 0})`,
      dataIndex: 'wayAmount',
      key: 'wayAmount'
    },
    {
      title: () => `在途个数(${sum.wayTotalNum || 0})`,
      dataIndex: 'wayTotalNum',
      key: 'wayTotalNum'
    },
    {
      title: () => `退回金额(${sum.sendAmount || 0}`,
      dataIndex: 'sendAmount',
      key: 'sendAmount'
    },
    {
      title: () => `退回个数(${sum.sendTotalNum || 0})`,
      dataIndex: 'sendTotalNum',
      key: 'sendTotalNum'
    },
  ]

  const AnimateBody = (props) => {
    return <AnimTableBody {...props} />
  }

  const CommonBody = (props) => {
    return <tbody {...props} />
  }

  return (
    <Table
      {...tableProps}
      columns={columns}
      scroll={{ x: 1400 }}
      simple
      rowKey={record => record.id}
      components={{
        body: { wrapper: isMotion ? AnimateBody : CommonBody },
      }}
    />
  )
}

List.propTypes = {
  location: PropTypes.object
}

export default List
